<style>
    #VIEW-login * {box-sizing: border-box;}
    #VIEW-login canvas {position: relative;z-index: 2;pointer-events: none;}
    #VIEW-login .tilt {position: absolute; width: 110%; height: 110%; top: -5%; left: -5%; overflow: hidden; }
    #VIEW-login .tilt__back,
    #VIEW-login .tilt__front {width: 100%; height: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    #VIEW-login .tilt__back {position: relative;}
    #VIEW-login .tilt__front {position: absolute; top: 0; left: 0; }
    #VIEW-login .loginmain {width: 100%; height: 100vh; overflow: hidden; background-size: 100%; margin: 0 auto;
        background-position: center top; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; position: relative; display: flex; align-items: center; justify-content: center; }
    #VIEW-login .loginmain{
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-size: 100%;
        margin: 0 auto;
        background-image: url(/admin-temp/layui/images/bj.jpg);
        background-position: center top;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    #VIEW-login .loginmain .main-content{display: flex;width: 1130px;height: 490px;position: absolute;z-index: 9;}

    #VIEW-login .loginmain .main-content .main-right {width: 490px;height: 100%;background-color: #FFFFFF;padding: 40px 0px;border-radius: 0px 10px 10px 0px;}
    #VIEW-login .loginmain .main-content .main-right .main-right-content{width: 270px;margin: auto;text-align: center;}
    #VIEW-login .loginmain .main-content .main-right .login-head{color: #333333;font-size: 24px;margin-bottom: 25px;}
    #VIEW-login .loginmain .main-content .main-right .login-desc{color: #999;font-size: 15px;margin-bottom: 20px;}

    #VIEW-login .loginmain .main-content .main-right .login-form .input-group {display: flex;margin-bottom: 20px;width: 100%;}
    #VIEW-login .loginmain .main-content .main-right .login-form .input-group input{width:100%;height: 40px;padding:0 10px;border-radius: 6px;border: #D3D3D3 1px solid;}
    #VIEW-login .loginmain .main-content .main-right .login-form .input-group .input-img{width: 110px;height: 40px;margin-left: 10px;border-radius: 6px;border: #D3D3D3 1px solid;cursor: pointer;}
    #VIEW-login .loginmain .main-content .main-right .login-form input.input:focus{border: 1px solid #1E6FFF;}
    #VIEW-login .loginmain .main-content .main-right .login-form .input-group .submit{width: 100%;height: 45px;padding:0 10px;color: #FFFFFF;font-size: 15px;border-radius: 6px;background-color: #1E6FFF;margin-top: 20px;cursor: pointer;}
    #VIEW-login .loginmain .main-content .main-right .login-form .input-group .submit:hover {background-color: #006ec6;}

    #VIEW-login .loginmain .main-content .main-right .touch{text-align: center; color: #333333;margin-top: 30px;}
    #VIEW-login .loginmain .main-content .main-right .touch a{color: #309CE7;}


    #VIEW-login .loginmain .copyright{position: absolute;bottom: 30px;left: 0;right: 0;margin: auto;text-align: center;color: #FFFFFF;}
    #VIEW-login .loginmain .copyright a{color: #FFFFFF;margin-left: 5px;}

    @media (min-width: 1199px) {
        #VIEW-login .loginmain .main-content .main-left{flex: 1;height: 100%;color: #FFFFFF;background: url(/admin-temp/layui/images/xhlpimg.png) 0 0 no-repeat;background-size: cover;padding: 30px 40px;border-radius: 10px 0 0 10px;}
        #VIEW-login .loginmain .main-content .main-left .name{font-size: 44px;margin: 90px 0 150px;font-weight: bold;}
        #VIEW-login .loginmain .main-content .main-left .introduce .introduce-onw{font-size: 20px;margin-bottom: 17px;}
        #VIEW-login .loginmain .main-content .main-left .introduce .introduce-tuo{font-style:italic;color: #C7C5C5;font-size: 12px;}
    }
    @media (max-width: 1200px) {
        #VIEW-login .loginmain .main-content {width: 80%;flex-direction: column;height: auto;padding-bottom: 60px;}
        #VIEW-login .loginmain .main-content .main-left .logo img {height: 44px;margin:auto auto 25px;display: block;}
        #VIEW-login .loginmain .main-content .main-left .name,
        #VIEW-login .loginmain .main-content .main-left .introduce {display: none;}
        #VIEW-login .loginmain .main-content .main-right {width: auto;height: auto;border-radius:10px;padding: 20px;}
        #VIEW-login .loginmain .main-content .main-right .login-head {margin-bottom: 10px;}
        #VIEW-login .loginmain .main-content .main-right .main-right-content {max-width: 270px;width: 100%;}
        #VIEW-login .loginmain .main-content .main-right .login-form .input-group .submit {margin-top: 0px;}
    }


</style>
<div id="VIEW-login" lay-title="登录">
    <div class="loginmain">
        <!-- <canvas class="cavs" width="1575" height="1337"></canvas> -->
        <div class="main-content">
            <div class="main-left">
                <div class="">
                    <img src="/admin-temp/layui/images/logo.png" >
                </div>
                <div class="name">
                    后台管理
                </div>
                <div class="introduce">
                    <div class="introduce-onw">
                        一个给你带来好运的互联网公司
                    </div>
                    <div class="introduce-tuo">
                        ·APP开发 ·高端网站定制 ·微信小程序 ·互联网推广
                    </div>
                </div>
            </div>
            <div class="main-right">
                <div class="main-right-content">
                    <div class="login-head">
                        管理员登录
                    </div>
                    <div class="login-desc">为保证账户安全，请保管好账号密码</div>
                    <div class="login-form">
                        <form name="input" action=""  class="form layui-form" lay-filter="login-form">
                            <div class="input-group">
                                <input type="text" name="account" lay-verify="account" lay-verType="tips" class="input" placeholder="账号">
                            </div>
                            <div class="input-group">
                                <input type="password" lay-verify="password" lay-verType="tips" name="password" class="input" placeholder="密码">
                            </div>
                            <div class="input-group">
                                <input type="text" name="verify" lay-verify="imgCode" lay-verType="tips" class="input input-yzm" placeholder="验证码">
                                <img class="input-img codeimg" src="/admin/index/verify?t=123" title="点击换一个" />
                            </div>
                            <div class="input-group">
                                <input type="button" value="登录" class="submit" lay-submit lay-filter="login-submit">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="touch">
                    有问题，联系技术支持 <a href="#">深正互联</a>
                </div>
            </div>

        </div>
        <div class="copyright">
            ©2020 ALL Rights 深圳市深正互联网络有限公司 版权所有 <a href="http://www.szhulian.com/" target="_blank">www.szhulian.com</a>
        </div>
    </div>
</div>

<!-- <script src="/admin-temp/layui/canvas.js"></script> -->

<script>



    layui.use(['admin','form','jquery'],function(admin,form,$){
        var $ = layui.jquery;

        // loginAnimate($)

        var view = $('#VIEW-login');

        var siam = layui.siam;


        form.render();

        form.verify({
            account:function(value,el){
                if( !value.length) return '请输入登录帐号';
            },
            password:function(value,el){
                if( value.length < 3) return '登录密码不能少于 3 位';
            },
            imgCode:function(value){
                if(value.length !== 4) return '图形验证码错误';
            },
        })
        //验证码
        view.find('.codeimg').click(function(){
            var src = $(this).attr('src');
            var url_arr = src.split('?')
            $(this).attr('src',url_arr[0]+'?t='+Math.random())
        })
        //提交登录表单
        form.on('submit(login-submit)',function(data){
            var loading = $(this).find('.layui-icon');
            if(loading.is(":visible")) return;

            loading.show();

            admin.get({
                url:'/admin/index/login',
                type:'POST',
                data:data.field,
                success:function(res){
                    var  res_data = res.data || {}
                    console.log(res_data)
                    admin.login(res_data.token,{},data.field.autoLogin === 'on');
                    admin.data([
                        {
                            key: 'user',
                            value: res_data.userInfo||{'u_name':''}
                        }
                    ]);
                    // 储存权限
                    admin.data([
                        {
                            key: 'auth',
                            value: res_data.authList||[]
                        }
                    ]);
                    admin.navigate('/');
                },
                force_fnc:function(res){
                    console.log(res)
                    view.find('.codeimg').click()
                },
                complete:function(){
                    loading.hide();
                }
            });
            return false;
        })

    })
</script>

